<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="base.css" rel="stylesheet" type="text/css"/>
    <link href="index.css" rel="stylesheet" type="text/css"/>
    <link href="detail.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header class="header">
    <div class="main clearfix">
        <div class="welcome full-left">
            你好，欢迎来到E商城
        </div>
        <div class="nav full-right">
            <ul>
                <li>
                    <a href="#" class="login red">登录</a>
                    <b>/</b>
                    <a href="#" class="reg">
                        注册
                    </a>
                </li>
                <li>
                    <a href="#">
                        会员中心
                    </a>
                </li>
                <li>
                    <a href="#">
                        帮助中心
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<section class="search">
    <div class="main clearfix">
        <div class="logo">
            <a href="#">
                <img src="logo.png"/>
            </a>
        </div>
        <div class="search-input">
            <div class="search-input-box clearfix">
                <input class="full-left" placeholder="输入您想搜索的商品"/>
                <span class="b-red full-right">搜索</span>
            </div>
            <div class="keys">
                <ul>
                    <li>
                        <a href="#" class="red">机油润滑油</a>
                    </li>
                    <li>
                        <a href="#" class="red">刹车油</a>
                    </li>
                    <li>
                        <a href="#" class="red">助理转向油</a>
                    </li>
                    <li>
                        <a href="#" class="red">房东冷却液</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-box">
            <div class="cart">
                <a href="#">
                    <img src="cart.png"/>
                    <span class="cart-num b-red">0</span>
                </a>
            </div>
        </div>
    </div>
</section>
<div class="container">
    <section class="navigation">
        <ul class="main">
            <li class="cate active">
                <a href="#">
                    全部商品分类
                </a>
            </li>
            <li>
                <a href="#">
                    首页
                </a>
            </li>
            <li>
                <a href="#">
                    保养配件
                </a>
            </li>
            <li>
                <a href="#">
                    油品
                </a>
            </li>
            <li>
                <a href="#">
                    汽车用品
                </a>
            </li>
        </ul>
    </section>

    <div class="detail-box">
        <section class="crumbs main">
            <ul>
                <li>
                    <a href="#" class="home">
                        首页
                    </a>
                </li>
                <li>
                    <span>
                        >
                    </span>
                    <a href="#" class="cate">
                        保养配件
                    </a>
                </li>
                <li>
                     <span>
                        >
                    </span>
                    <a href="#" class="cate">
                        保养套装
                    </a>
                </li>
            </ul>
        </section>
        <section class="detail main clearfix">
            <div class="full-left photos">
                <div class="photo">
                    <img src="product.png">
                </div>
                <div class="photo-list">
                    <ul>
                        <li>
                            <img src="product.png">
                        </li>
                        <li>
                            <img src="product.png">
                        </li>
                        <li class="active">
                            <img src="product.png">
                        </li>
                        <li>
                            <img src="product.png">
                        </li>
                        <li>
                            <img src="product.png">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="full-right info">
                <div class="name">
                    超值奥迪A4L 2.0T 保养套装A（力魔机油4L 5W-40 滤清器散件）
                </div>
                <div class="more">
                    <div class="item">
                        <span class="title">
                            销售价：
                        </span>
                        <span class="red price">￥299.00</span>
                    </div>
                    <div  class="item">
                        <span class="title">
                            编  号：
                        </span>
                        <span class="code">513111541741</span>
                    </div>
                    <div  class="item">
                        <span class="title">
                            赠送积分：
                        </span>
                        <span class="jf">22分</span>
                    </div>
                    <div class="notice">
                        <a href="#">到货通知</a>
                    </div>
                </div>
                <div class="buttons">
                    <a href="#" class="b-red buy">立即购买</a>
                </div>
            </div>
        </section>
    </div>
</div>

</body>
</html>